<template>
	<view class="content">
		<!-- 头部区域 -->
		<view class="header">
			<img src="/static/index-logo.png" class="logo" alt="" />
			<view class="header-right">
				<uni-icons type="search" size="25" color="#333"></uni-icons>
				<uni-icons type="person" size="25" color="#333"></uni-icons>
			</view>
		</view>

		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="nav-item" v-for="(item, index) in navItems" :key="index"
				:class="{ active: currentNav === item.id}" @click="switchNav(index, item.id)">
				{{ item.name }}
			</view>
		</view>

		<!-- 公告栏 -->
		<view class="notice-bar">
			<uni-notice-bar scrollable :text="noticeText" :showIcon="true" :speed="80"></uni-notice-bar>
		</view>

		<!-- 轮播图 -->
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in swiperList" :key="index">
				<ImgVue :src="item.imageUrl" mode="aspectFill" class="swiper-image" />
			</swiper-item>
		</swiper>

		<!-- 瀑布流内容 -->
		<view class="masonry"
			:style="{ paddingLeft: masonryPaddingLeft + 'rpx', paddingRight: masonryPaddingRight + 'rpx' }">
			<view class="masonry-item" v-for="(item, index) in imageList" :key="index" @click="goToDetailPage(item.id)">
				<view class="photo-card">
					<ImgVue class="photo" :src="item.imageUrl" mode="widthFix" />
					<view class="card-content">
						<text class="photo-title">{{ item.title }}</text>
						<view class="author-info">
							<ImgVue class="avatar" :src="item.avatar" />
							<text class="author-name">{{ item.username }}</text>
						</view>
						<view class="interaction-bar">
							<view class="left-actions">
								<view class="action">
									<uni-icons type="heart" size="16" color="#999999" />
									<text class="count">{{ item.likesCount }}</text>
								</view>
								<view class="action">
									<uni-icons type="chat" size="16" color="#999999" />
									<text class="count">{{ item.commentsCount }}</text>
								</view>
							</view>
							<uni-icons type="star" size="16" color="#999999" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref
} from 'vue';
import {
	getCategoryList
} from '../../../api/category'; // 引入你的 API 方法
import {
	getArtWokrList
} from '../../../api/artwork';
import ImgVue from '../../../components/Img/Img.vue';
import {
	getBannerList
} from '../../../api';
import {
	getNotice
} from '../../../api';
import {
	onLoad
} from '@dcloudio/uni-app';

// 导航栏数据
const navItems = ref([]);
const currentNav = ref(1); // 默认选中的导航项
const title = ref(null);

// 公告栏数据
const noticeText = ref(null);
const notices = ref([]); // 保存公告数组
let currentNoticeIndex = 1; // 当前展示的公告索引

// 轮播图数据
const swiperList = ref([]);

// 瀑布流数据
const imageList = ref([]);

// 动态计算瀑布流的 padding
const masonryPaddingLeft = ref(20);
const masonryPaddingRight = ref(20);

// 切换导航栏
const switchNav = (index, id) => {
	currentNav.value = id;
	fetchArtWorkList();
}

// 页面跳转
const goToDetailPage = (id) => {
	uni.navigateTo({
		url: `/pages/photoDetail/photoDetail?id=${id}`
	});
}

// 获取分类数据
const fetchCategories = async () => {
	try {
		const response = await getCategoryList(); // 获取分类数据
		if (response.data) {
			// 在分类数据的开头插入“全部”
			navItems.value = [{
					id: null,
					name: '全部'
				}, // 设置 id 为 null
				...response.data, // 追加其余分类数据
			];
		} else {
			navItems.value = [{
				id: null,
				name: '全部'
			}]; // 如果没有分类数据，也添加“全部”
		}
	} catch (error) {
		console.error('获取分类数据失败:', error);
		// 如果分类数据获取失败，也确保至少有“全部”
		navItems.value = [{
			id: null,
			name: '全部'
		}];
	}
};

// 获取艺术作品列表
const fetchArtWorkList = async () => {
	try {
		const response = await getArtWokrList(currentNav.value, title.value);
		console.log(response)
		imageList.value = response.data;
		console.log(imageList.value)

	} catch (error) {
		console.error('获取作品数据失败:', error);
	}
}

// 获取首页轮播图
const fetchBannerList = async () => {

	try {
		const response = await getBannerList();
		console.log(response)
		swiperList.value = response.data

	} catch (error) {
		console.error('获取作品数据失败:', error);
	}
}

// 获取公告数据并设置轮换逻辑
const fetchNotice = async () => {
	try {
		const response = await getNotice();
		if (response.data && response.data.length > 0) {
			notices.value = response.data; // 保存公告数组
			noticeText.value = notices.value[1].noticeContent; // 初始化显示第一个公告

			// 启动轮换计时器
			startNoticeRotation();
		} else {
			noticeText.value = '暂无公告';
		}
	} catch (error) {
		console.error('获取公告失败:', error);
		noticeText.value = '公告加载失败';
	}
};

// 轮换公告内容
const startNoticeRotation = () => {
	setInterval(() => {
		if (notices.value.length > 0) {
			// 更新索引到下一个公告
			currentNoticeIndex = (currentNoticeIndex + 1) % notices.value.length;

			// 更新显示的公告内容
			noticeText.value = notices.value[currentNoticeIndex].noticeContent;
		}
	}, 1000);
};

// 页面加载时，初始化数据
onLoad(() => {
	fetchCategories();
	fetchArtWorkList();
	fetchBannerList();
	fetchNotice();

	const screenWidth = uni.getSystemInfoSync().screenWidth;
	masonryPaddingLeft.value = screenWidth > 360 ? 30 : 20;
	masonryPaddingRight.value = masonryPaddingLeft.value;
});
</script>



<style>
	.content {
		padding: 0;
		margin: 0;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
	}

	.logo {
		width: 400rpx;
		height: 100rpx;
		margin-left: -130rpx;
		/* 添加负的左边距使 logo 向左移动 */
	}

	.header-right {
		display: flex;
		align-items: center;
		gap: 30rpx;
		/* 图标之间的间距 */
	}

	.nav-bar {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		background-color: #ffffff;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.nav-item {
		font-size: 28rpx;
		color: #333;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		transition: all 0.3s;
	}

	.nav-item.active {
		color: #ff6b81;
		font-weight: bold;
		background-color: #fff0f3;
	}

	.notice-bar {
		margin: 10rpx 0;
	}

	.swiper {
		height: 400rpx;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
	}

	.masonry {
		margin-top: 10px;
		column-count: 2;
		column-gap: 24rpx;
	}

	.masonry-item {
		break-inside: avoid;
		margin-bottom: 24rpx;
	}

	.photo-card {
		background: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.photo {
		width: 100%;
		display: block;
	}

	.card-content {
		padding: 24rpx;
	}

	.photo-title {
		font-size: 28rpx;
		font-weight: 500;
		margin-bottom: 16rpx;
		display: block;
	}

	.author-info {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.avatar {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.author-name {
		font-size: 24rpx;
		color: #666666;
	}

	.interaction-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left-actions {
		display: flex;
		gap: 24rpx;
	}

	.action {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.count {
		font-size: 24rpx;
		color: #999999;
	}
</style>